<template>
  <div class="message-section">
    <!-- 顶部的消息通知 -->
    <div class="message-section-top">
      <div class="message-section-top-item">
        <van-badge :content="5">
          <i class="iconfont icon-at"></i>
          <span>@我的</span>
        </van-badge>
      </div>
      <div class="message-section-top-item">
        <van-badge content="">
          <i class="iconfont icon-pinglun"></i>
          <span>评论</span>
        </van-badge>
      </div>
      <div class="message-section-top-item">
        <van-badge content="99+">
          <i class="iconfont icon-dianzan1"></i>
          <span>点赞</span>
        </van-badge>
      </div>
      <div class="message-section-top-item">
        <van-badge content="18">
          <i class="iconfont icon-shoucang1"></i>
          <span>收藏</span>
        </van-badge>
      </div>
    </div>

    <div class="message-section-divide-line"></div>

    <!-- 聊天消息列表 -->
    <div class="message-section-list">
      <div
        class="message-section-list-item"
        v-for="(item, index) in list"
        :key="index"
      >
        <img :src="item.avatar" class="message-section-list-item-avatar" />
        <div class="message-section-list-item-right">
          <div class="message-section-list-item-right-content">
            <h1>{{ item.username }}</h1>
            <p>{{ item.message }}</p>
          </div>
          <div class="message-section-list-item-right-time">
            {{ item.time }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
interface MessageInterface {
  avatar: string;
  username: string;
  message: string;
  time: string;
  isRead: boolean;
}
const jpg1 = require("@/assets/images/1.jpg");
const jpg2 = require("@/assets/images/2.jpg");
const jpg3 = require("@/assets/images/3.jpg");
const jpg4 = require("@/assets/images/4.jpg");
const jpg5 = require("@/assets/images/5.jpg");
const jpg6 = require("@/assets/images/6.jpg");
const jpg7 = require("@/assets/images/7.jpg");
const jpg8 = require("@/assets/images/8.jpg");
const jpg9 = require("@/assets/images/9.jpg");
const jpg10 = require("@/assets/images/jpg10.webp");
const jpg11 = require("@/assets/images/jpg11.webp");
const jpg12 = require("@/assets/images/jpg12.webp");
const jpg13 = require("@/assets/images/jpg13.webp");
const jpg14 = require("@/assets/images/jpg14.webp");
const jpg15 = require("@/assets/images/jpg15.webp");
const jpg16 = require("@/assets/images/jpg16.webp");
const jpg17 = require("@/assets/images/jpg17.webp");
const imgs = [
  jpg1,
  jpg2,
  jpg3,
  jpg4,
  jpg5,
  jpg6,
  jpg7,
  jpg8,
  jpg9,
  jpg10,
  jpg11,
  jpg12,
  jpg13,
  jpg14,
  jpg15,
  jpg16,
  jpg17,
];
const names = [
  "圣地兰",
  "甜多夫斯基",
  "哥斯拉",
  "萝莉仙女爱吃草",
  "小欣欣",
  "奶油大萝卜",
  "龙希胜",
  "随机名字",
  "没得办法",
  "咸鱼一条",
  "哦豁",
  "重庆娃子",
  "老北京葱油饼",
  "嘿嘿嘿",
  "狗子和我",
  "陈大爷",
];
const messageList: MessageInterface[] = [];

const list = ref<MessageInterface[]>([]);

const generateMessageList = (length: number) => {
  for (let index = 0; index < length; index++) {
    list.value.push({
      avatar: imgs[Math.floor(Math.random() * imgs.length)],
      username: names[Math.floor(Math.random() * names.length)],
      message: "这是一条用来测试文字长度超出标准的测试的内容，就随便谢谢",
      time: Math.random() > 0.8 ? "12:18" : "昨天",
      isRead: Math.random() > 0.7 ? true : false,
    });
  }
};

onMounted(() => {
  const length: number = Math.floor(Math.random() * 20 + 5);
  generateMessageList(length);
});
</script>

<style scoped lang="less">
.message-section {
  &-top {
    margin-top: 20px;
    padding: 5px 32px 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-color-std-10);
    &-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: var(--background-color-std-10);

      .iconfont {
        width: 48px;
        height: 48px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        font-size: 22px;
        margin-bottom: 10px;
      }

      span {
        font-size: 14px;
      }
    }

    &-item:nth-of-type(1) {
      .iconfont {
        background-color: #409fea;
      }
    }

    &-item:nth-of-type(2) {
      .iconfont {
        background-color: #22d59c;
      }
    }

    &-item:nth-of-type(3) {
      .iconfont {
        background-color: #ff4946;
      }
    }

    &-item:nth-of-type(4) {
      .iconfont {
        background-color: #ffd200;
      }
    }
  }

  &-divide-line {
    width: 100%;
    height: 10px;
    background-color: var(--background-color-std-8);
  }

  &-list {
    &-item {
      height: 70px;
      background-color: var(--background-color-std-10);
      display: flex;
      padding: 10px 0px 10px 20px;
      justify-content: space-between;
      align-items: center;
      &-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        box-shadow: 0 0 4px #eaeaea;
      }

      &-right {
        flex: 1;
        min-width: 0;
        margin-left: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        position: relative;

        &-content {
          flex: 1;
          min-width: 0;
          > h1 {
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 10px;
            color: var(--font-color-std-2);
            color: #eaeaea;
            font-weight: 600;
          }

          > p {
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #666;
          }
        }

        &-time {
          width: 60px;
          font-size: 13px;
          text-align: right;
          margin-right: 20px;
          color: #999;
        }
      }

      &-right::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #222;
        transform: scaleY(0.4);
      }
    }
  }
}
</style>

46 179 80
